<template>
    <div class="head-tag">
        <el-scrollbar style="width:100vw" ref="refScrollbar" @wheel.prevent="scrollGun">
            <el-tag v-for="tag, index in tagList" :key="tag.path" :closable="'/index/dashboard' === tag.path ? false : true"
                @click="handleGORoute(tag)" @close="tagsStore.removeTag(index)" :type="tag.path == route.fullPath ? '' : 'info'"
                :effect="tag.path == route.fullPath ? 'dark' : 'plain'">
                <el-dropdown trigger="contextmenu" @contextmenu="hiddeDrop">
                    <span>
                        <el-icon size="large" style="vertical-align:middle;">
                            <Location />
                        </el-icon>
                        {{ $t(tag.title) }}
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="handleRight(0, tag.path)">刷新</el-dropdown-item>
                            <el-dropdown-item :disabled="index === tagList.length-1" @click="handleRight(1, tag.path)">关闭右侧</el-dropdown-item>
                            <el-dropdown-item :disabled="index === tagList.length-1 && tagList.length==1" @click="handleRight(2, tag.path)">全部关闭</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-tag>
        </el-scrollbar>
    </div>
</template>
<script setup lang="ts">
import { ElScrollbar } from 'element-plus'
import { Location } from '@element-plus/icons-vue'
import { useTagsStore } from '@/stores/tag';
import { ref, watch, computed } from 'vue';
import { useRoute, useRouter } from "vue-router"

const refScrollbar = ref();

const route = useRoute()
const router = useRouter()
const tagsStore = useTagsStore()
let tagList = computed(()=>{
    return tagsStore.tagList
})
interface tag {
    title: string,
    path: string
}
//跳转页面
const handleGORoute = (tag: tag) => {
    if (tag.path == route.fullPath) return
    router.push(tag.path)
}
//修复element组件右键bug
const hiddeDrop = () => {
    document.body.click()
}
//监听路由
watch(() => route, (newval) => {
    if ("indexView" !== route.matched[0].name) return;
  let index = -1;
  if ("createproduct" == route.name || "editproduct" == route.name) {
    console.log(111)
    let i = tagList.value.findIndex(
      (item) => "productlist" == item.name
    );
    if (-1 !== i) index = i + 1;
  }
    tagsStore.pushTag(newval,index)
},{deep:true})
// 鼠标控制滚动条
const scrollGun = (e: { wheelDelta: number; deltaY: number }) => {
    const wheelDelta = e.wheelDelta;

    const scrollbar = refScrollbar.value;
    // scrollbar.wrap$获取到包裹容器的element对象
    scrollbar.setScrollLeft(scrollbar.wrapRef.scrollLeft - wheelDelta);
    // console.log(scrollbar.wrapRef.scrollLeft, wheelDelta);
};
//右键标签
const handleRight = (code: number, path: string) => {
    switch (code) {
        //刷新时
        case 0:
            router.push('/index/redirectPage' + path)
            break;
        //关闭右侧
        case 1:
            tagsStore.closeRightTags(path)
            break;
        //关闭全部
        case 2:
            tagsStore.closeAllTags()
            router.push('/index/dashboard')
            break;
        default:
            break;
    }
}
</script>
<style scoped lang="less"> 

.head-tag {
    display: flex;
    padding: 5px 5px 5px 20px;
    &>.el-scrollbar {
        height: auto;
        :deep(.el-scrollbar__view) {
            display: flex;
        }
    }
    .el-tag {
        margin-right: 10px;
        flex-shrink: 0;
    }
}
.el-tag:hover {
    cursor: pointer;
}
</style>